<div class="dataTable message-library">
  <div class="table-buttons">
    <div class="table-buttons-left">
      <!-- <div class="operate" (click)="addOrEdit('add')" *ngIf="accessButton.Create"><i
          class="iconfont icon-add"></i>{{'EquipmentManagement.EquipmentManagement.Create' | translate}}</div>
      <div class="operate" (click)="addOrEdit('edit')" *ngIf="accessButton.Edit"><i
          class="iconfont icon-pen01"></i>{{'EquipmentManagement.EquipmentManagement.Edit' | translate}}</div>
      <div class="operate"   *ngIf="accessButton.Delete" (click)="delete()"><i
          class="iconfont icon-fork" ></i>{{'EquipmentManagement.EquipmentManagement.Delete' | translate}}</div>
      <div class="left-button-last" (click)="refresh()"><i class="iconfont icon-refresh1"></i></div> -->
      <button class="op-btn" nz-button nzType="primary" *ngIf="accessButton.Create" (click)="addOrEdit('add')">
        <!-- <i nz-icon nzType="plus" nzTheme="outline"></i> -->
        <svg t="1649734574121" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4498" width="20" height="20"><path d="M512 958.016611c-119.648434 0-232.1288-46.367961-316.736783-130.559656-84.640667-84.255342-131.263217-196.255772-131.263217-315.455235 0-119.168499 46.624271-231.199892 131.232254-315.424271 84.607983-84.191695 197.088348-130.559656 316.736783-130.559656s232.1288 46.367961 316.704099 130.559656c84.67163 84.224378 131.263217 196.255772 131.263217 315.391587 0.032684 119.199462-46.591587 231.232576-131.263217 315.455235C744.1288 911.615966 631.648434 958.016611 512 958.016611zM512 129.983389c-102.623626 0-199.071738 39.743475-271.583282 111.936783-72.480581 72.12794-112.416718 168.063432-112.416718 270.079828s39.903454 197.951888 112.384034 270.047144c72.511544 72.191587 168.959656 111.936783 271.583282 111.936783 102.592662 0 199.071738-39.743475 271.583282-111.936783 72.480581-72.160624 112.416718-168.063432 112.384034-270.079828 0-102.016396-39.903454-197.919204-112.384034-270.016181C711.071738 169.759548 614.592662 129.983389 512 129.983389z" p-id="4499" fill="#ffffff"></path><path d="M736.00086 480.00086 544.00086 480.00086 544.00086 288.00086c0-17.664722-14.336138-32.00086-32.00086-32.00086s-32.00086 14.336138-32.00086 32.00086l0 192L288.00086 480.00086c-17.664722 0-32.00086 14.336138-32.00086 32.00086s14.336138 32.00086 32.00086 32.00086l192 0 0 192c0 17.695686 14.336138 32.00086 32.00086 32.00086s32.00086-14.303454 32.00086-32.00086L544.00258 544.00086l192 0c17.695686 0 32.00086-14.336138 32.00086-32.00086S753.696546 480.00086 736.00086 480.00086z" p-id="4500" fill="#ffffff"></path></svg>
        {{'EquipmentManagement.EquipmentManagement.Create' | translate}}
      </button>
      <button class="op-btn" nz-button nzType="primary" *ngIf="accessButton.Edit" (click)="addOrEdit('edit')">
        <!-- <i nz-icon nzType="edit" nzTheme="outline"></i> -->
        <svg t="1649741351323" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5424" width="20" height="20"><path d="M521.152 393.408l319.936-320 45.248 45.312-320 320z" fill="#ffffff" p-id="5425"></path><path d="M896 960H64V64h448v64H128v768h704V448h64v512z" fill="#ffffff" p-id="5426"></path></svg>
        {{'EquipmentManagement.EquipmentManagement.Edit' | translate}}
      </button>
      <button class="op-btn" nz-button nzType="danger" *ngIf="accessButton.Delete" (click)="delete()" style="color: white ;">
        <!-- <i nz-icon nzType="delete" nzTheme="outline"></i> -->
        <svg t="1649741442766" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5702" width="20" height="20"><path d="M256 256h554.666667v640H256V256z m42.666667 42.666667v554.666666h469.333333V298.666667H298.666667z m128 128h42.666666v298.666666h-42.666666v-298.666666z m170.666666 0h42.666667v298.666666h-42.666667v-298.666666zM213.333333 256h640v42.666667H213.333333V256z m213.333334-85.333333h213.333333v42.666666h-213.333333V170.666667z" fill="#ffffff" p-id="5703"></path></svg>
        {{'EquipmentManagement.EquipmentManagement.Delete' | translate}}
      </button>
      <button  class="refresh" nz-button nzType="primary" nzShape="circle" (click)="refresh()"><i nz-icon nzType="reload" nzTheme="outline"></i></button>
    </div>

    <div class="table-buttons-right">
      <div class="equipmet_toolbar">
        <itmp-toolbar exportName="messageLibrary" [toolbarList]="toolbarList" [selectData]="selectEquipmentData" [accessButton]='accessButton'
          eventType="equipment-position" [searchData]="searchData">
        </itmp-toolbar>
      </div>
      
      <!-- <svg  class="downIcon" t="1649742572374" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11428" width="20" height="20"><path d="M940.373333 203.093333l-116.053333-150.186666c-10.24-11.946667-25.6-18.773333-40.96-18.773334H240.64c-15.36 0-30.72 6.826667-39.253333 18.773334L85.333333 203.093333c-11.946667 15.36-8.533333 35.84 5.12 47.786667 15.36 11.946667 35.84 8.533333 47.786667-5.12L249.173333 102.4h527.36l110.933334 143.36c6.826667 8.533333 15.36 13.653333 27.306666 13.653333 6.826667 0 15.36-1.706667 20.48-6.826666 6.826667-5.12 11.946667-13.653333 11.946667-22.186667 0-11.946667-1.706667-20.48-6.826667-27.306667z" fill="#7D85BB" p-id="11429"></path><path d="M890.88 194.56H133.12c-37.546667 0-66.56 30.72-66.56 66.56v662.186667c0 37.546667 30.72 66.56 66.56 66.56h757.76c37.546667 0 66.56-30.72 66.56-66.56V261.12c0-37.546667-29.013333-66.56-66.56-66.56z m-163.84 421.546667L535.893333 805.546667c-6.826667 6.826667-15.36 10.24-23.893333 10.24h-5.12-1.706667c-6.826667-1.706667-13.653333-5.12-18.773333-10.24L296.96 616.106667c-13.653333-13.653333-13.653333-34.133333 0-47.786667 13.653333-13.653333 34.133333-13.653333 47.786667 0l133.12 133.12V401.066667c0-18.773333 15.36-34.133333 34.133333-34.133334s34.133333 15.36 34.133333 34.133334v300.373333l133.12-133.12c13.653333-13.653333 34.133333-13.653333 47.786667 0 11.946667 13.653333 11.946667 34.133333 0 47.786667z" fill="#7D85BB" p-id="11430"></path></svg> -->
     
    </div>
  </div>
  <nz-table id="nzTable" #basicTable [nzShowPagination]="false" [nzData]="listOfData" style="padding:0.1rem" [nzFrontPagination]="false">
    <thead>
      <tr class="dataTitle">
        <th *ngFor="let item of renderHeader" class="listTitle">
        
          <div>{{'DisseminationManagement.MessageLibrary.' + item.name | translate}}</div>
          <!-- 选择框 -->
          <div class="switch no-print" *ngIf="item.name==='Category_Name'" style="min-width: 1.3rem">
            <nz-select style="width: 100%;" [(ngModel)]="searchData[item.value]" [nzPlaceHolder]="'Share.All' | translate"
              nzShowSearch nzAllowClear (ngModelChange)="onSearch(item.value)">
              <nz-option *ngFor="let one of selectionList[item.name]" [nzLabel]="one.categoryName"
                [nzValue]="one.categoryName"></nz-option>
            </nz-select>
          </div>
          <!-- 输入框 -->
          <div class="switch no-print" *ngIf="item.name==='Template_Name' || item.name==='ID'">
            <input nz-input [placeholder]="'' | translate" style="width:100%" [(ngModel)]="searchData[item.value]"
              (keyup)="onSearch(item.value)" #searchInput />
          </div>
          <!-- 日期选择 -->
          <!-- <div class="switch" *ngIf="item.name==='Updated_Date'">
                <nz-date-picker [(ngModel)]="searchData[item.name]" (ngModelChange)="onSearch(item.name)"></nz-date-picker>
            </div> -->
          <!-- 占用位置 -->
          <div class="switch no-print" *ngIf="item.name==='Message_Content' || item.name==='Display_ID'">
            <input nz-input style="opacity: 0" />
          </div>
        </th>
      </tr>
    </thead>
    <tbody class="dataList">
      <tr *ngFor="let data of basicTable.data;index as i" (click)="clickTR(i)" [class.active]="data.active" class="every-tr">
        <td>{{data.msgId}}</td>
        <td>{{data.category.categoryName}}</td>
        <td>{{data.template.templateName}}</td>
        <td>
          <div style="width: 2.2rem;height:0.2rem;display: flex;justify-content: center;align-items: center;">
            <!-- <itmp-thumbnail [title]="data.template.templatePages[0].templateTexts[0]"
              [imgs]="data.template.templatePages[0].templateGraphics"></itmp-thumbnail> -->
            <img [src]="data.url?(data.url.split(',')[0]+'?'+now):''" alt="" style="">
          </div>
        </td>
        <!-- <td>{{data.DisplayID}}</td> -->
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <!-- <td>Showing 1 to 10 of 1083 entries</td> -->
        <td [attr.colspan]="renderHeader.length+1" style="padding: 10px;padding-left: 30px; padding-right: 30px; " *ngIf="listOfData.length!==0">
          <itmp-pagination [totalEle]="pagination.totalEle" [pageSize]="pagination.pageSize"
            [pageNum]="pagination.currentPage" showCountInfo=true [count]="pagination.currentSize"
            (pageNumChange)="onPageChange($event)" (pageSizeChange)="onSizeChange($event)"></itmp-pagination>
        </td>
      </tr>
    </tfoot>
  </nz-table>
</div>